import { createElement, ReactNode, JSX } from "react"
import styled from "styled-components";
import styles from './style.module.css'

type ICard = {
    src?: string,
    children?: JSX.Element[] | JSX.Element,
    title?: string,
    Icon?: React.FC<React.SVGProps<SVGSVGElement>>,
    className?: string,
    data?: Record<string, Record<string, string | number>>,
    titleClass?: string
}

const CardContainer = styled.div`
    background:#ffffff;
    box-shadow:0 4px 20px 0 rgba(218,218,218,.6);
    border-radius:12px;
    padding:12px;
    margin:0 12px;
`

function Card({ src, children, title, Icon, className, data, titleClass }: ICard) {
    const IconImg = src && typeof src === 'string' ?
        src && <img src={src} alt={title} className="w-[28px] h-[28px]" /> :
        Icon && createElement(Icon as any, { className: styles.icon });
    if (Array.isArray(children)) {
        children = children.map(item => {
            if (item.key && data) {
                return { ...item, props: { ...item.props, ...data[item.key] } }
            } else return item
        })
    } else if (children?.key && data) {
        children = { ...children, props: { ...children.props, ...data[children.key] } }
    }

    return (
        <>
            <CardContainer>
                <div className={`flex gap-x-[8px] items-center `}>
                    {IconImg && IconImg}
                    {title && <span className={`title ${titleClass}`}>{title}</span>}
                </div>
                <div
                    className={`
                        flex 
                        justify-around 
                        flex-wrap 
                        py-2 
                        gap-y-[24px] 
                        ${className}
                    `}>
                    {children}
                </div>
            </CardContainer>
        </>
    )
}
export default Card